import React,{Component} from 'react';
import {Table,Modal} from 'antd';
import BtnGroup from '../../components/BtnGroup';
import DropDown from '../../components/Dropdown';
import UserForm from './../user/UserForm';
import {connect} from 'dva';

const confirm = Modal.confirm;
const UserList =({user,dispatch})=>{
    const columns = [{
        title: '姓名',
        dataIndex: 'name',
        filters: [{
            text: 'Joe',
            value: 'Joe',
        }, {
            text: 'Jim',
            value: 'Jim',
        }, {
            text: 'Submenu',
            value: 'Submenu',
            children: [{
                text: 'Green',
                value: 'Green',
            }, {
                text: 'Black',
                value: 'Black',
            }],
        }],
        onFilter: (value, record) => record.name.indexOf(value) === 0,
        sorter: (a, b) => a.name.length - b.name.length,
    }, {
        title: '年龄',
        dataIndex: 'age',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.age - b.age,
    }, {
        title: '地址',
        dataIndex: 'address',
        filters: [{
            text: 'London',
            value: 'London',
        }, {
            text: 'New York',
            value: 'New York',
        }],
        filterMultiple: false,
        onFilter: (value, record) => record.address.indexOf(value) === 0,
        sorter: (a, b) => a.address.length - b.address.length,
    },{
        title:'操作',
        render: (text,record) => {
            return (
                <DropDown onMenuClick={(e)=>handleMenu(record,e)} menuList={[{ key: '1', name: '编辑' ,icon:'edit'}, { key: '2', name: '删除' ,icon:'delete'}]} />
            )
        }
    }];
    const handleMenu =　(record,e) =>{
        if(e.key === '0'){
            dispatch({
                type:'user/showModal',
                payload:{
                    currentItem:record,
                    modalType: 'update',
                }
            })
        }else if(e.key === '1'){
            confirm({
                title: '是否删除该条数据？',
                okText: '是',
                okType: 'danger',
                cancelText: '否',
                onOk() {
                    dispatch({
                        type:'user/remove',
                        payload:{
                            id:record.key
                        }
                    })
                },
            });
        }
    }
    const {list,visible,modalType,currentItem} = user;
    const modalProps = {
        item:modalType === 'add' ? {} : currentItem,
        maskVisible:visible,
        onSubmit(data){
            dispatch({
                type:`user/${modalType}`,
                payload:data
            })
        },
        onCancel () {
            dispatch({
                type: 'user/hideModal',
            })
        },
    }
    const btnList = [{
        label:'新增',
        icon:'plus',
        fun:()=>{
            dispatch({
                type:'user/showModal',
                payload:{
                    modalType: 'add',
                }
            })
        }
    }]
    return(
        <div style={styles.listBox}>
            <BtnGroup btnGroup={btnList}/>
                <div>
                    <Table columns={columns} dataSource={list} />
                </div>
            <UserForm {...modalProps}/>
        </div>
    )
}

const styles ={
    listBox:{
        margin:10,
    }
}

export default connect(({user})=>({user}))(UserList);
